<template>
  <div class="login-main">
    <div class="login-container">
      <img src="@/assets/logo.png" alt="Logo" class="login-logo"> <!-- 添加 Logo -->
      <h2>游戏管理系统登录</h2>
      <el-input v-model="loginForm.name" placeholder="用户名" prefix-icon="el-icon-user"></el-input> <!-- 添加图标 -->
      <el-input v-model="loginForm.password" placeholder="密码" type="password" prefix-icon="el-icon-lock"></el-input> <!-- 添加图标 -->
      <el-button type="success" @click="login" class="login-button">登录</el-button>
      <el-button type="primary" @click="goToRegister" class="register-button">注册</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import request from "@/utils/request";
import { ElMessage } from "element-plus";

const loginForm = ref({
  name: '',
  password: ''
});

const router = useRouter();

const login = () => {
  request.post('/login', loginForm.value).then(response => {
    if (response.code === 200) {
      localStorage.setItem("token", response.data.token);
      router.push('/main');
      ElMessage.success("登录成功");
    } else {
      ElMessage.error(response.message);
    }
  }).catch(error => {
    console.error('登录请求错误:', error);
    ElMessage.error("登录请求错误");
  });
};

const goToRegister = () => { // 定义 goToRegister 方法
  router.push('/register');
};
</script>

<style scoped>
.login-main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('../assets/login-bg.jpeg') no-repeat center center; /* 添加背景图像 */
  background-size: cover;
}

.login-container {
  width: 360px; /* 调整宽度 */
  padding: 40px;
  background-color: rgba(255, 255, 255, 0.9); /* 半透明背景 */
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.login-logo {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
}

h2 {
  margin-bottom: 30px;
  color: #333;
}

.el-input {
  margin-bottom: 20px;
}

.login-button, .register-button {
  width: 100%;
  margin-top: 10px;
}

.login-button {
  margin-bottom: 10px;
}
</style>
